<template>
  <div id="main">
    <Sidebar />
    <div id="content">
      <div class="panel">
        <div class="header topic_header">
          <span class="topic_full_title"><span v-show="res.top === true" class="put_top">置顶</span>{{res.title}}</span>
          <div class="action" v-show="rootNum.success === true">
            <span class="span-common span-success" id="collect_btn" action="collect" @click="getCollect(Route_id)">加入收藏</span>
          </div>
          <div class="changes">
            <span>发布于 {{getTime(res.last_reply_at,res.create_at)}}</span><span>作者 <a :href="'/user/'+author.loginname">{{author.loginname}}</a></span><span>{{res.visit_count}} 次浏览</span><span> 来自 {{showTab(res.tab)}}</span>
          </div>
        </div>
        <div class="inner topic">
          <div class="topic_content" v-html="res.content"></div>
          <div class="share">
            <!-- JiaThis Button BEGIN -->
            <div class="jiathis_style_24x24">
              <a class="jiathis_button_qzone"></a>
              <a class="jiathis_button_tsina"></a>
              <a class="jiathis_button_tqq"></a>
              <a class="jiathis_button_weixin"></a>
              <a class="jiathis_button_renren"></a>
              <a class="jiathis_counter_style"></a>
            </div>
            <!-- JiaThis Button END -->
          </div>
        </div>
      </div>
      <div class="panel" v-if="res.replies !== undefined">
        <div class="header">
          <span class="col_fade">{{res.replies.length}} 回复</span>
        </div>
        <div class="cell reply_area reply_item" reply_id="5d50b7032c5659594cb9dbf5" reply_to_id="" v-for="(item,index) in res.replies" :id="'reply'+index">
          <a class="anchor" :id="item.id"></a>
          <div class="author_content">
            <a :href="'/user/'+item.author.loginname" class="user_avatar">
              <img :src="item.author.avatar_url" :title="item.author.loginname"></a>
            <div class="user_info">
              <a class="dark reply_author" :href="'/user/'+item.author.loginname">{{item.author.loginname}}</a>
              <a class="reply_time" :href="'#'+item.id">{{index+1}}楼•{{new Date(),item.create_at}}</a>
            </div>
            <div class="user_action"><span><i class="fa up_btn fa-thumbs-o-up" :class="{'uped':ups.action === 'up'}" title="喜欢" v-on:click="getUps(item.id,index)">{{ups.action === 'up'?"已赞":"点赞"}}</i><span class="up-count">{{item.ups.length}}</span></span><span>
              <i class="fa fa-reply reply2_btn" title="回复" v-on:click="Comment(index)">回复</i></span>
            </div>
          </div>
          <div class="reply_content from-xuemeifenglin">
            <div class="markdown-text"><p v-html="item.content"></p>
            </div>
          </div>
          <div class="clearfix" v-bind:id="'clearfix_'+index" v-show="show === true">
            <div class="reply2_area"><form class="reply2_form" action="/5c9788b45e4f3c032e4ea5ac/reply" method="post" style="display: block;">
              <input type="hidden" name="_csrf" value="SokJg6j0-CEjPO2AZKnjc0DiIIvLEFd9FavI">
              <input type="hidden" name="reply_id" value="5d26bab72c5659594cb9d760">
              <div class="markdown_editor in_editor">
                <div class="markdown_in_editor">
                  <textarea class="span8 editor reply_editor" id="reply2_editor_5d26bab72c5659594cb9d760" name="r_content" rows="4" style="display: none;"></textarea><div class="editor-toolbar"><a class="eicon-bold"></a><a class="eicon-italic"></a><i class="separator">|</i><a class="eicon-quote"></a><a class="eicon-unordered-list"></a><a class="eicon-ordered-list"></a><i class="separator">|</i><a class="eicon-link"></a><a class="eicon-image"></a><i class="separator">|</i><a class="eicon-info" href="http://lab.lepture.com/editor/markdown" target="_blank"></a><a class="eicon-preview"></a><a class="eicon-fullscreen"></a></div><div class="CodeMirror cm-s-paper"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6px; left: 104px;"><textarea style="position: absolute; padding: 0px; width: 1px; height: 1em; outline: currentcolor none medium; font-size: 4px;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" wrap="off"></textarea></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 1px;"></div></div><div class="CodeMirror-vscrollbar"><div style="width: 1px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1" draggable="true"><div class="CodeMirror-sizer" style="min-width: 137px; margin-left: 0px; min-height: 28px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: currentcolor none medium;"><div class="CodeMirror-measure"><pre><span>@</span><span>y</span><span>a</span><span>n</span><span>g</span><span>x</span><span>u</span><span>y</span><span>i</span><span>n</span><span>g</span><span> </span></pre></div><div style="position: relative; z-index: 1; display: none;"></div><div class="CodeMirror-code" style=""><pre>@yangxuying </pre></div><div class="CodeMirror-cursor" style="left: 104px; top: 2px; height: 16px;">&nbsp;</div><div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none;">&nbsp;</div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 28px;"></div><div class="CodeMirror-gutters" style="display: none; height: 160px;"></div></div></div>
                  <div class="editor_buttons">
                    <input class="span-primary reply2_submit_btn submit_btn" type="submit" data-id="5d26bab72c5659594cb9d760" data-loading-text="回复中.." value="回复">
                  </div>
                </div>
              </div>
            </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sidebar from './components/Sidebar'
import {ListInfo, Collect, AccessToken, Ups} from './uitls/Api'
import TimeFormat from './uitls/Tools'
export default {
  name: 'ListInfo',
  data () {
    return {
      res: {},
      author: {},
      rootNum: {},
      Route_id: '',
      ups: {},
      show: false
    }
  },
  components: {
    Sidebar
  },
  methods: {
    getAxios () {
      console.log(this.$route.params.id)
      this.Route_id = this.$route.params.id
      ListInfo(this.$route.params.id).then((res) => {
        console.log(res)
        this.res = res.data
        this.author = res.data.author
      }).catch(res => {
        console.log(res)
      })
    },
    getTime (fasttime, lasttime) {
      return TimeFormat(fasttime, lasttime)
    },
    showTab (tab) {
      if (tab === 'good') {
        return '精华'
      } else if (tab === 'weex') {
        return 'weex'
      } else if (tab === 'share') {
        return '分享'
      } else if (tab === 'ask') {
        return '回答'
      } else if (tab === 'job') {
        return '招聘'
      }
    },
    getAccessToken () {
      AccessToken(this.$store.state.accesstoken).then((res) => {
        console.log(res)
        this.rootNum = res
      })
    },
    getCollect (id) {
      Collect(this.$store.state.accesstoken, id).then((res) => {
        console.log(res)
      })
    },
    getUps (id, index) {
      Ups(this.$store.state.accesstoken, id).then((res) => {
        this.ups = res
        console.log(res)
      })
    },
    Comment (_index) {
      console.log(_index)
      this.show = !this.show
    }
  },
  mounted () {
    this.getAxios()
    this.getAccessToken()
  }
}
</script>

<style scoped>

</style>
